﻿@model   DHQGHN.PM2.Models.Online.LoginKhaiOnlineViewModel
             <style>
    .ui-tooltip, .arrow:after {
        background: #FAFAD2;
    }

    .ui-tooltip {
        color: black;
        font-size: 12px;
    }

    .arrow {
        width: 70px;
        height: 16px;
        overflow: hidden;
        position: absolute;
        left: 50%;
        margin-left: -35px;
        bottom: -16px;
    }

        .arrow.top {
            top: -16px;
            bottom: auto;
        }

        .arrow.left {
            left: 20%;
        }

        .arrow:after {
            content: "";
            position: absolute;
            left: 20px;
            top: -20px;
            width: 25px;
            height: 25px;
            box-shadow: 6px 5px 9px -9px black;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }

        .arrow.top:after {
            bottom: -20px;
            top: auto;
        }
</style>
<script>
      @functions{
          public string GetAntiForgeryToken()
          {
              string cookieToken, formToken;
              AntiForgery.GetTokens(null, out cookieToken, out formToken);
              return cookieToken + "," + formToken;
          }
      }    
    function ClickButtonNext() {

        if (checkhtml()) {
            alert("Dữ liệu nhập không được có ký tự '<' ở đầu.");
        } else {
            var IdLoginCode = $('#LoginCode').val();
            var pin = $('#PIN').val()
            if (pin.length != 4) {
                $("#message").empty();
                $("#message").text('Yêu cầu nhập 4 số mã PIN');
                return;
            };

            var dataSend = {
                'IdLoginCode': IdLoginCode,
                'pin': pin
            };
            $("#divLoading").show();
            $('#btnNext').attr('disabled', true);
            $.ajax({
                url: '@Url.Action("Pin","Online")',
                dataType: 'html',
                method: 'get',
                cache: false,
                headers: {
                    'VerificationToken': '@GetAntiForgeryToken()'
                },
                data: dataSend,
                success: function myfunctionSuccess(data, textStatus, jqXHR) {
                    $('#formLogin').html(data);

                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert('Có lỗi xảy ra trong quá trình đăng nhập: ' + errorThrown);
                },
                complete: function (jqXHR, textStatus) {
                    $("#divLoading").hide();
                    $('#btnNext').removeAttr('disabled');
                }

            });
        }
    };
    $(document).ready(function () {
        Tooltip();
        $("#PIN").keydown(function (e) {
            if (e.keyCode == 13) {
                ClickButtonNext();
            }
        });
    });
</script>

<div class="noidung" id="divLoadPartial">
    @if (@Model.IsLoginFirst == 1)
    {
        <div class="login-fields1">
            <p style="float: left; padding-right: 5px; vertical-align: top;">
                <img src="../Images/rt_arrow.gif">
            <p>Xin vui lòng ghi lại mã PIN dưới đây.</p>
        </div>
        <div class="login-fields1">
            <p style="float: left; padding-right: 5px; vertical-align: top;">
                <img src="../Images/rt_arrow.gif">
            <p align="justify" style="padding-left: 25px;">
                Hệ thống sẽ cho phép bạn trở lại chương trình điều tra nếu thời gian cho phiên làm việc đã hết hoặc bạn cần dừng
                và sử dụng sau đó. Phiên làm việc sẽ hết nếu không có bất kỳ thao tác nào quá 15 phút. Chương trình điều tra
                sẽ mất khoảng 40 phút để hoàn thành.
            </p>
        </div>
        <div class="khungmapin"><p style=" float: left; margin-left: 20px; ">PIN:</p><p style=" color: red;"> @Html.DisplayFor(m => m.PIN) </p></div>
        <p style="padding-left: 25px; line-height: 100px; font-size: 1.1em; ">Để đảm bảo an toàn, chúng tôi sẽ không cho phép thay đổi mã PIN nếu mất hoặc quên.</p>

        <div class="row-online">
            @Html.HiddenFor(m => m.PIN)
            <button type="button" class="btn btn-small btn-small_online btn-success" style="width: 120px; margin-top: 50px;" id="btnNext" onclick="ClickButtonNext()">Tiếp tục</button>
        </div>
    }
    else
    {
        Model.PIN = "";
        <div class="login-fields1">
            <p style="float: left; padding-right: 5px; vertical-align: top;">
                <img src="../Images/rt_arrow.gif">
            <p>Xin vui lòng nhập mã PIN vào đây.</p>

        </div>
        <div class="row-online">

            <div class="form-group">
                @Html.Label("PIN", new { @class = "control-lable" }):
                @Html.TextBoxFor(m => m.PIN, new { @class = "form-control", style = "width:150px; display: inline;   margin-left: 20px;", @MaxLength = 4, @title = @Html.ToolTipMessageFor(m => m.PIN) })
                <input type="text" style="visibility:hidden;"  id="aaa" />
            </div>
            <div id="message" class="text-danger">
                @Html.ValidationMessageFor(m => m.PIN)
                @Model.Message
            </div>
            <button type="button" id="btnNext" class="btn btn-small btn-small_online btn-success buttonClick" onclick="ClickButtonNext()">Tiếp tục >></button>
         
        </div>


    }
    @Html.HiddenFor(m => m.Start)
    @Html.HiddenFor(m => m.End)
    @Html.HiddenFor(m => m.LoginCode)
    <div class="row-online text-danger">
        @Html.ValidationSummary(true)
    </div>
</div>
